<template>
  <div class="pie-wrap">
    <div class="echarts">
      <div :style="{height:'380px',width:'100%'}" ref="myEchart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { mapActions,mapState } from "vuex";
export default {
  props: {
    userJson: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
        teacherAge:state => state.home.teacherAge
    }),
    xData(){
      let arr = []
      this.teacherAge&&this.teacherAge.forEach((v)=>{
        arr.push(v.name)
      })
      return arr
    },
    yData(){
      
      const type = ["30岁以下", "31岁-35岁", "36岁-40岁", "41岁-45岁", "46岁以上"]
      let arr = [
        {
            data: [],
            name: "30岁以下",
            stack: "one",
            type: "bar",
            barWidth:'10',
            itemStyle:{
            barBorderRadius: [0,0,10,10]
            }
        },
        {
            data: [],
            name: "31岁-35岁",
            stack: "one",
            type: "bar",
            barWidth:'10',
            itemStyle:{
            }
        },
        {
            data: [],
            name: "36岁-40岁",
            stack: "one",
            type: "bar",
            barWidth:'10',
            itemStyle:{
            }
        },
        {
            data: [],
            name: "41岁-45岁",
            stack: "one",
            type: "bar",
            barWidth:'10',
            itemStyle:{
            }
        },
        {
            data: [],
            name: "46岁以上",
            stack: "one",
            type: "bar",
            barWidth:'10',
            itemStyle:{
            barBorderRadius: [10,10,0,0]
            }
        }
        ]
        
      this.teacherAge&&this.teacherAge.forEach((v,i)=>{
        arr[0].data.push(v['lte30'])
      })
      this.teacherAge&&this.teacherAge.forEach((v,i)=>{
        arr[1].data.push(v['31-35'])
      })
      this.teacherAge&&this.teacherAge.forEach((v,i)=>{
        arr[2].data.push(v['36-40'])
      })
      this.teacherAge&&this.teacherAge.forEach((v,i)=>{
        arr[3].data.push(v['41-45'])
      })
      this.teacherAge&&this.teacherAge.forEach((v,i)=>{
        arr[4].data.push(v['gte46'])
      })
      return arr
    }
  },
  data() {
    return {
      chart: null
    };
  },
  components: {},
  async mounted() {
    await this.getTeacherAgeRange()
    this.pieConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    ...mapActions({
      getTeacherAgeRange:"home/getTeacherAgeRange"
    }),
    pieConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        
        color: [
          "#bdf7c9",
          "#cbd8f5",
          "#97dcf6",
          "#519ef1",
          "#b1a4f6",
        ],
        legend: {
          top: "5%",
          right:'10%',
          data: ["30岁以下", "31岁-35岁", "36岁-40岁", "41岁-45岁", "46岁以上"],
          itemGap: 10,
          itemWidth: 15,
          itemHeight: 12
        },
        xAxis: [
          {
            interval:0,
            name: "",
            type: "category",
            axisLine:{
              show:false
            },
            data: this.xData
            // [
            //   "英才",
            //   "通信",
            //   "电工",
            //   "物理",
            //   "光电",
            //   "计算机",
            //   "自动化",
            //   "机电",
            //   "航天航空",
            //   "数字",
            //   "经营",
            //   "外国语",
            //   "马院",
            //   "能源",
            //   "资环院",
            //   "生命",
            //   "格拉斯哥"
            // ]
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "各学院教师年龄分布",
            nameTextStyle:{
              fontSize:16,
              fontWeight:700,
            },
            axisLine:{
              show:false,
              lineStyle:{

              }
            },
            axisLabel:{
              fontSize:14
            }
          }
        ],
        series: this.yData
        // [
        //   {
        //     data: [5, 2, 5, 7,8,8,8,4,5,6,7,8,9,5,4,5,2],
        //     name: "30岁以下",
        //     stack: "one",
        //     type: "bar",
        //     barWidth:'10',
        //     itemStyle:{
        //       barBorderRadius: [0,0,10,10]
        //     }
        //   },
        //   {
        //     data: [5, 2, 5, 7,8,8,8,4,5,6,7,8,9,5,4,5,2],
        //     name: "31岁-35岁",
        //     stack: "one",
        //     type: "bar"
        //   },
        //   {
        //     data: [5, 2, 5, 7,8,8,8,4,5,6,7,8,9,5,4,5,2],
        //     name: "36岁-40岁",
        //     stack: "one",
        //     type: "bar"
        //   },
        //   {
        //     data: [5, 2, 5, 7,8,8,8,4,5,6,7,8,9,5,4,5,2],
        //     name: "41岁-45岁",
        //     stack: "one",
        //     type: "bar"
        //   },
        //   {
        //     data: [5, 2, 5, 7,8,8,8,4,5,6,7,8,9,5,4,5,2],
        //     name: "46岁以上",
        //     stack: "one",
        //     type: "bar",
        //     itemStyle:{
        //       barBorderRadius: [10,10,0,0]
        //     }
        //   },
        // ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>